<template>
  <div class="sugClass">
    <a-comment>
      <div slot="content">
        <quillEditor
          ref="quillEditor"
          :information="information"
          @handleRichtextAddClick="handleRichtextAddClick"
        ></quillEditor>
        <a-form-item class="submit-btn-div">
          <a-button
            htmlType="submit"
            :loading="submitting"
            @click="handleSubmit"
            type="primary"
            class="common-btn"
            >提交</a-button
          >
        </a-form-item>
      </div>
    </a-comment>

    <a-list
      v-if="comments.length"
      :dataSource="comments"
      header=" "
      itemLayout="horizontal"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <a-comment>
          <a slot="author" class="detail-author">{{ item.name }}</a>
          <p slot="content" v-html="item.suggestContent"></p>
          <a-tooltip slot="datetime" :title="item.createTime">
            <span>{{ item.createTime }}</span>
          </a-tooltip>
        </a-comment>

        <template slot="actions" v-for="i in item.actions">
          <span
            class="actions-mr"
            v-if="i.isShow"
            :key="i.type"
            @click="handleOperation(i.type, item.id, item.isAccept)"
          >
            <a-icon
              :theme="i.theme"
              :type="i.type"
              :style="{ fontSize: '18px', color: i.color }"
            />
            {{ i.text }}
          </span>
        </template>
      </a-list-item>
    </a-list>
    <el-pagination
      v-if="comments.length"
      class="rh"
      background
      @size-change="handleSizeChange"
      @current-change="handleChangePage"
      :current-page="pn"
      :page-sizes="[5, 10, 15, 20, 30, 40]"
      :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { mixin } from "../../../../../src/mixin/mixin";
import quillEditor from "@/components/quillEditor/quillEditor";
import {
  getSuggestion,
  addSuggestion,
  deleteSuggestion,
  isAcceptSuggestion,
} from "../../../../service/Api";
export default {
  name: "suggestion",
  mixins: [mixin],
  data() {
    return {
      pn: 1,
      ps: 5,
      arr: [],
      total: 0,
      information: "请输入反馈内容和建议~",
    };
  },
  components: {
    quillEditor,
  },
  mounted() {
    this.initSuggestionList();
  },
  methods: {
    initSuggestionList() {
      getSuggestion({
        pn: this.pn,
        ps: this.ps,
      }).then((res) => {
        if (res.data.records.length > 0) {
          let suggestionData = res.data.records;
          this.total = res.data.total;

          this.comments = suggestionData.map((item) => {
            return {
              ...item,
              actions: [
                {
                  type: "delete",
                  text: "删除",
                  color: "#F56C6C",
                  isShow: item.canDelete && item.isAccept == 0,
                },
                {
                  type: "like-o",
                  text: item.isAccept == 0 ? "未采纳" : "已采纳",
                  color: item.isAccept == 0 ? "#909399" : "#00B98D",
                  isShow: item.canAccept,
                  theme: item.isAccept == 0 ? "outlined" : "filled",
                },
              ],
            };
          });
        } else {
          this.comments = [];
        }
      });
    },
    handleRichtextAddClick(val) {
      this.value = val;
      // console.log(this.handleImg(val));
    },
    // 获取富文本中的所有src路径
    // handleImg(value) {
    //   let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
    //   let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
    //   let str = value;
    //   let arr = str.match(imgReg); //筛选出所有的img
    //   // 存放所有图片的src
    //   let srcArr = [];
    //   for (let i = 0; i < arr.length; i++) {
    //     let src = arr[i].match(srcReg);
    //     // 获取图片地址
    //     srcArr.push(src[1]);
    //   }
    //   return srcArr;
    // },
    handleChangePage(val) {
      this.pn = val;
      this.initSuggestionList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.initSuggestionList();
    },
    handleSubmit() {
      if (!this.value) {
        return;
      }
      this.submitting = true;
      setTimeout(() => {
        this.submitting = false;
        addSuggestion({
          suggestContent: this.value,
        }).then((res) => {
          if (res != undefined) {
            this.value = "";
            this.$message.success("您已成功提交建议！");
            this.initSuggestionList();
            this.$refs.quillEditor.text = "";
          }
        });
      }, 2000);
    },
    handleChange(e) {
      this.value = e.target.value;
    },
    handleOperation(type, id, isAccept) {
      if (type == "delete") {
        this.$confirm("确定要删除该建议吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteSuggestion(id).then(() => {
              this.$message.success("建议删除成功！");
              this.initSuggestionList();
            });
          })
          .catch(() => {});
      } else {
        let flag = isAccept == 0 ? 1 : 0;
        let message = isAccept == 0 ? "建议采纳成功！" : "已取消建议采纳";
        this.value = "";
        isAcceptSuggestion(id, flag).then((res) => {
          this.$message.success(message);
          this.initSuggestionList();
        });
      }
    },
  },
};
</script>

<style scoped>
/* @import "../../../../styles/common.css"; */

.common-btn {
  width: 120px;
  font-size: 14px;
  background-color: #00b98d;
  border-color: #00b98d;
}

.actions-mr {
  display: inline-block;
  margin-top: 17px;
}

.ant-list-item {
  align-items: flex-start !important;
}

.rh {
  margin-bottom: 20px;
}

.detail {
  white-space: pre-wrap;
}
#detail >>> .ant-comment-content-author {
  justify-content: flex-start !important;
}
.detail-author {
  font-size: 18px;
  color: #000;
}
span.ant-comment-content-author-name {
  font-size: 18px !important;
}
.sugClass >>> .submit-btn-div {
  margin-bottom: 10px !important;
}
.sugClass .ant-form-item {
  margin-bottom: 12px !important;
}
.ant-comment-content-detail >>> img {
  width: 300px;
  height: 200px;
}
</style>

<style>
.sugClass .ant-list-header {
  padding: 0px !important;
}
/* .ql-editor,
.ql-editor {
  height: 450px;
} */
</style>